<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/pure-min.css" />
    <link rel="stylesheet" type="text/css" href="css/layer.css" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <style>
        body {
            overflow: hidden;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -ms-user-select: none;
        }

        .data-input {
            position: relative;
            width: 640px;
            height: 360px;
        }

        input.label-item {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #000;
        }

        img.label-item {
            border: none;
        }

        .btns input {
            width: 120px;
        }
    </style>
    <script data-main="js/print" src="js/require-2.3.6.min.js"></script>
    <title>标签打印</title>
</head>

<body data-debug="true">
    <script type="text/html" id="data-input-tpl">
    {{each items item index}}
    {{if (item.type == 'text' || item.type == 'code')}}
    <input class="label-item"
           name="{{item.id}}"
           data-type="{{item.type}}"
           value="{{item.value}}"
           style="position: absolute; width: {{item.width}}px; height: {{item.height}}px; left: {{item.left}}px; top: {{item.top}}px; font-family: {{item.fontName}}; font-size: {{item.fontSize}}pt;">
    {{else}}
    <img class="label-item"
         name="{{item.id}}"
         data-type="{{item.type}}"
         src="{{item.imageSrc}}"
         style="position: absolute; width: {{item.width}}px; height: {{item.height}}px; left: {{item.left}}px; top: {{item.top}}px;">
    {{/if}}
    {{/each}}
</script>
    <div class="wrap">
        <div class="appbar app-color-dark-gray">
            <span class="title">标签打印</span>
            <div class="actions">
                <a href="javascript:void(0);" data-action="more"><img src="images/ic_menu_normal.png"></a>
            </div>
        </div>
        <p>请填写以下内容后打印：</p>
        <form class="data-input" action="#">
        </form>
        <p class="btns">
            <button class="pure-button" data-action="preview">打印预览</button>
            <label>按编号从: </label>
            <input type="text" name="from" value="1">
            <label>到: </label>
            <input type="text" name="to" value="10">
            <button class="pure-button" data-action="print">打印</button>
        </p>
    </div>
    <!-- <script src="http://localhost:8000/CLodopfuncs.js"></script> -->
</body>

</html>